.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.one{
    .header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        .px2rem(height, 136);
        .px2rem(line-height, 136);
        background: black;
        color: white;
        .px2rem(font-size, 36);
        z-index: 110;
        h3{
            position: absolute;
            text-align: center;
            width: 100%;
        }
        .left{
            float: right;
            margin-right: 2%;
        }
    }
    .banner{
        img{
            .px2rem(margin-top, 136);
            .px2rem(height, 390);
            width: 100%;
        }
    }
    .column{
        .px2rem(height, 730);
        .px2rem(padding, 26);
        display: flex;
        .px2rem(font-size, 28);
        .px2rem(padding-bottom, 200);
        background: #f3f3f3;
        .left{
            flex: 1;
            .px2rem(margin-right, 10);
            display: flex;
            flex-direction: column;
            section{
                a{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                flex: 1;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                dl{
                    dt{
                        width: 100%;
                        .px2rem(height, 85);
                        display: flex;
                        justify-content: center;
                        img{
                            height: 100%;
                        }
                    }
                    dd{
                        .px2rem(margin-top, 10);
                        .px2rem(line-height, 50);
                        text-align: center;
                        color: white;
                    }
                }
            }
            .top{
                background: #19d3c5;
            }
            .bot{
                background: #94d078;
                .px2rem(margin-top, 24);
            }
        }
        .right{
            flex: 1;
            display:flex;
            flex-direction: column;
            img{
                .px2rem(width, 95);
            }
            .top{
                flex: 1;
                background: #ee9f43;
                dl{
                    display: flex;
                    height: 100%;
                    dt{
                        height: 100%;
                        flex: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    dd{
                       height: 100%;
                        flex: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: white;
                    }
                }
            }
            .cen{
                 flex: 1;
                background: #4cb8f3;
                .px2rem(margin-top, 20);
                display: flex;
                align-items: center;
                justify-content: center;
                dl{
                    dt{
                        width: 100%;
                        .px2rem(height, 85);
                        display: flex;
                        justify-content: center;
                        img{
                            height: 100%;
                        }
                    }
                    dd{
                        .px2rem(margin-top, 10);
                        .px2rem(line-height, 50);
                        text-align: center;
                        color: white;
                    }
                }
            }
            .bot{
                .px2rem(margin-top, 20);
                 flex: 1;
                background: #ebc441;
                dl{
                    display: flex;
                    height: 100%;
                    dt{
                        height: 100%;
                        flex: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    dd{
                       height: 100%;
                        flex: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: white;
                    }
                }
            }
        }
    }
    
}


.two{
    background: #f3f3f3;
    .header{
        background: black;
        width: 100%;
        .px2rem(height, 136);
        .px2rem(line-height, 136);
        color: white;
        .px2rem(font-size, 36);
        z-index: 110;
        h3{
            position: absolute;
            text-align: center;
            width: 100%;
        }
    }
    .uls{
        background-color: white;
        li{
            .px2rem(height, 110);
            .px2rem(line-height, 110);
            position: relative;
            border-bottom: 1px solid #ccc;
            margin: 0 3%;
            display: flex;
            .left{
                .px2rem(width, 98);
                .px2rem(height, 110);
                display: flex;
                align-items: center;
                img{
                    .px2rem(width, 66);
                    .px2rem(width, 66);
                    .px2rem(margin-left, 11)
                }
            }
            .center{
                flex: 1;
                .px2rem(font-size, 34);
            }
            .right{
                .px2rem(width, 34);
                a{
                    .px2rem(font-size, 36);
                }
            }
            a{
                position: absolute;
                width: 100%;
                height: 100%;
            }
        }
        li:last-child{
            border: none;
        }
    }
}


.three{
    background-color: #f3f3f3;
    .top{
        background-color: #81b9ff;
        .px2rem(height, 302);
        display: flex;
        align-items: center;
        .logo{
            width: 100%;
            .px2rem(height, 152);
            display: flex;
            .left{
                .px2rem(width, 248);
                img{
                    .px2rem(height, 152);
                    float: right;
                }
            }
            .center{
                flex: 1;
                color: white;
                .px2rem(font-size, 32);
                .px2rem(line-height, 82);
                margin-left: 2%;
            }
            .right{
                .px2rem(width, 88);
                display: flex;
                align-items: center;
                a{
                   .px2rem(font-size, 52);
                   text-align: center; 
                }
            }
        }
    }
    .uls{
        background-color: white;
        .px2rem(margin-top, 22);
        li{
            .px2rem(height, 110);
            .px2rem(line-height, 110);
            position: relative;
            border-bottom: 1px solid #ccc;
            margin: 0 3%;
            display: flex;
            .left{
                .px2rem(width, 98);
                .px2rem(height, 110);
                display: flex;
                align-items: center;
                img{
                    .px2rem(width, 66);
                    .px2rem(width, 66);
                    .px2rem(margin-left, 11)
                }
            }
            .center{
                flex: 1;
                .px2rem(font-size, 34);
            }
            .right{
                .px2rem(width, 34);
                a{
                    .px2rem(font-size, 36);
                }
            }
            a{
                position: absolute;
                width: 100%;
                height: 100%;
            }
        }
        li:last-child{
            border: none;
        }
    }
}

.nav{
    width: 100%;
    .px2rem(height, 110);
    background: white;
    z-index: 110;
    position: fixed;
    bottom: 0;
    font-weight: bold;
    box-shadow: 10px 1px 10px #ccc;
    ul{
        display: flex;
        li{
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: center;
            a{
                .px2rem(margin-top, 24);
                flex: 1;
            }
            p{
                .px2rem(line-height, 32);
                .px2rem(font-size, 20);
            }
        }
        .on{
            color: #4cb8f3;
            a{
                color: #4cb8f3;
            }
        }
    }    
}
